<template>
  <div class="sidebar">
    <el-menu :default-active="onRoutes" unique-opened @select="switchSelect" :router="!useTabs">
      <template v-for="item, index in menus">
        <el-menu-item v-if="item.index !== ''" :index="String(item.index + 1)" :key="index">
          <i :class="item.icon ? item.icon : 'el-icon-menu'"></i>
          <span class="menu_text">{{item.text}}</span>
        </el-menu-item>
        <el-submenu v-else :index="String(index + 1)" :key="index">
          <template slot="title">
            <i :class="item.icon ? item.icon : 'el-icon-menu'"></i>
            <span class="menu_text">{{item.text}}</span>
          </template>
          <template v-for="subItem, subIndex in item.children" >
            <el-menu-item v-if="subItem.index !== ''" :index="(index+1) + '-' + (subIndex+1)" :key="subIndex">
              {{subItem.text}}
            </el-menu-item>
            <el-submenu v-else :index="(index+1) + '-' + (subIndex+1)" :key="subIndex">
              <template slot="title">
                <span class="menu_text">{{subItem.text}}</span>
              </template>
               <template v-for='secItem, secIndex in subItem.children'>
                <el-menu-item v-if="secItem.index !== ''" :index="(index+1) + '-' + (subIndex+1) + '-' + (secIndex+1)" :key="secIndex">
                  {{secItem.text}}
                </el-menu-item>
                <el-submenu v-else :index="(index+1) + '-' + (subIndex+1) + '-' + (secIndex+1)" :key="secIndex">
                  <template slot="title">
                    <span class="menu_text">{{secItem.text}}</span>
                  </template>
                  <el-menu-item v-for='thrItem, thrIndex in secItem.children' :index="(index+1) + '-' + (subIndex+1) + '-' + (secIndex+1) + '-' + (thrIndex+1)" :key="thrIndex">
                      {{thrItem.text}}
                  </el-menu-item>
                </el-submenu>
  
              </template>
            </el-submenu>
          </template>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>
<script>
import { menus, useTabs } from "@/constant";
import { mapMutations } from "vuex";

export default {
  data() {
    return {
      menus,
      useTabs
    }
  },
  created() {
    this.$store.dispatch("asideNavActive", { activeNav: this.$route.path });
    useTabs && this.addTab(this.$route.path);
  },
  computed: {
    onRoutes() {
      return this.$store.state.asideNavActive;
    },
    foldAsideNav() {
      return this.$store.state.foldAsideNav;
    }
  },
  defaultProps: {
          children: 'children',
          label: 'label'
        },
  methods: {
    ...mapMutations([
      'addTab'
    ]),
    switchSelect(index) {
      var arr = index.split('-');
      var menu = menus
      for (var i = 0; i < arr.length; i++) {
        if (i === (arr.length - 1)) {
          menu = menu[Number(arr[i]) - 1]
        } else {
          menu = menu[Number(arr[i]) - 1].children
        }
        console.log(menu)
      };
      var path = menu.index
      if (!path) return false
      return useTabs ? this.addTab(path) : function() {}();
    }
  }
}

</script>
<style scoped lang="scss">
.sidebar {
  display: block;
  position: fixed;
  width: 200px;
  left: 0;
  top: 88px;
  bottom: 0;
  background: #204583;
  overflow-y: auto;
  overflow-x: hidden;

  &>ul {
    height: 100%;
  }
}

.sidebar /deep/ .el-menu {
  background: #204583;
}

.sidebar /deep/ .el-menu-item,
.sidebar /deep/ .el-submenu__title {
  color: #fff;
  font-size: 12px;
}
/*.sidebar .el-submenu .el-menu-item::before {
  display: none;
}*/
.sidebar /deep/ .el-submenu__icon-arrow {
  left: 148px;
}

.sidebar /deep/ .el-menu-item.is-active {
  background: #208aeb;
  color: #fff;
}

.el-menu-item:hover,
.el-submenu /deep/ .el-submenu__title:hover {
  background-color: #173386;
}

@for $i from 1 through 7 {
  .menu_icon_#{$i} {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("../static/img/menu_icon_#{$i}.png") no-repeat;
    vertical-align: middle;
    margin-right: 5px;
    margin-left: -5px;
  }
}

.el-submenu .el-menu-item::before {
  content: "";
  width: 4px;
  height: 4px;
  background-color: #fff;
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
  margin-left: -16px;
  margin-right: 12px;
}

</style>
